<template>
  <div class="addMerchant">
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-collapse accordion v-model="on">
      <el-collapse-item name="1">
        <template slot="title">
          基础信息 <i class="header-icon el-icon-info"></i>
        </template>
        <new-base v-on:toogle="toogleOn" @editMerchant="editMerchantNum"></new-base>
      </el-collapse-item>
      <el-collapse-item name="2">
        <template slot="title">
          账户信息（开通通道需填写） <i class="header-icon el-icon-info"></i>
        </template>
        <new-account :merchantNum="merchant_num" :show="disabled" v-on:toogle="toogleOn"></new-account>
      </el-collapse-item>
      <el-collapse-item name="3">
        <template slot="title">
          法人信息（开通通道需填写） <i class="header-icon el-icon-info"></i>
        </template>
        <new-principal :merchantNum="merchant_num" :show="disabled" v-on:toogle="toogleOn"></new-principal>
      </el-collapse-item>
      <el-collapse-item name="4">
        <template slot="title">
          联系人信息（开通通道需填写） <i class="header-icon el-icon-info"></i>
        </template>
        <new-contacts :merchantNum="merchant_num" :show="disabled" v-on:toogle="toogleOn"></new-contacts>
      </el-collapse-item>
      <el-collapse-item name="5">
        <template slot="title">
          微信公众关注（选填） <i class="header-icon el-icon-info"></i>
        </template>
        <new-wechat :merchantNum="merchant_num" :show="disabled"></new-wechat>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import newBase from './components/new-base'
import newAccount from './components/new-account'
import newPrincipal from './components/new-principal'
import newContacts from './components/new-contacts'
import newWechat from './components/new-wechat'

export default {
  name: 'newMerchant',
  components: {
    Breadcrumb,
    newBase,
    newAccount,
    newPrincipal,
    newContacts,
    newWechat
  },
  data() {
    return {
      on: '1',
      disabled: 1,
      merchant_num: 0
    }
  },
  methods: {
    toogleOn(v, k) {
      this.on = v
      this.disabled = k
    },
    editMerchantNum(v) {
      this.merchant_num = v
    }
  }
}
</script>